<template>
  <div>
    <br>
    <group label-width="5.5em" label-margin-right="2em" label-align="right">
      <x-input title="原密码：" placeholder="登录密码" type="password" v-model="oldpwd"></x-input>
      <x-input title="新密码：" placeholder="6位以上密码组合" type="password" :min="6" :max="16" v-model="newpwd"></x-input>
      <x-input title="确定密码：" placeholder="再次输入密码" type="password" v-model="comfirmpwd" :equal-with="newpwd"></x-input>
    </group>
    <br>
    <div style="padding:10px;">
      <x-button @click.native="updatePassword()" type="primary">提 交</x-button>
    </div> 
    <toast v-model="errorMsg" type="cancel" width="20em">修改失败。密码输入错误，请重新提交</toast>   
  </div>
</template>

<script>
  import { GroupTitle, Group, Cell, XInput, XButton, Toast, Confirm} from 'vux'

  export default {
    components: {
      Group,
      GroupTitle,
      Cell,
      XInput,
      XButton,
      Toast,
      Confirm
    },
    data () {
      var ms_staffId = localStorage.getItem('ms_staffId')
      return {
        staffId: ms_staffId,
        oldpwd: '',
        newpwd: '',
        comfirmpwd: '',
        errorMsg: false
      }
    },
    methods: {
      updatePassword: function () {
        var self = this
        var params = new URLSearchParams();
        params.append('staffId', self.staffId);
        params.append('oldpwd', self.oldpwd);
        params.append('newpwd', self.newpwd);
        self.$ajax({
          method: 'post',
          url: '../wx/user/update/password',
          data: params
        })
        .then(function (res) {
          if (res.data == true) {
            self.showPlugin()
          } else {
            self.errorMsg = true
          }
        })
        .catch(function (err) {
          console.log(err)
        })
      },
    showPlugin () {
      var self = this
      self.$vux.confirm.show({
        title: '修改密码成功',
        content: '请用新密码登录',
        onCancel () {
          self.$router.push('../tabbar/myinfo')
        },
        onConfirm () {
          self.$router.push('../tabbar/myinfo')
        }
      })
    },
    }
  }
</script>
